<template>
  <transition name="toast">
    <div v-if="visible" class="fixed z-[9999] p-4 rounded-lg shadow-lg max-w-xs w-full" :class="[
      positionClasses,
      typeClasses,
    ]">
      <div class="flex items-center">
        <!-- <div v-if="icon" class="mr-3">
          <component :is="icon" class="w-5 h-5" />
        </div> -->
        <div class="flex-1">
          <p class="text-sm font-medium">{{ message }}</p>
        </div>
        <button v-if="showClose" @click="close" class="ml-2 p-1 rounded-full hover:bg-opacity-20 hover:bg-black">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
// import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/vue/24/outline'

type ToastType = 'success' | 'error' | 'warning' | 'info'
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'

const props = withDefaults(defineProps<{
  message: string
  type?: ToastType
  position?: ToastPosition
  timeout?: number
  showClose?: boolean
}>(), {
  type: 'info',
  position: 'top-right',
  timeout: 3000,
  showClose: true
})

const visible = ref(false)
let timer: NodeJS.Timeout | null = null

const typeClasses = computed(() => {
  const classes = {
    success: 'bg-green-100 text-green-800',
    error: 'bg-red-100 text-red-800',
    warning: 'bg-yellow-100 text-yellow-800',
    info: 'bg-blue-100 text-blue-800',
  }
  return classes[props.type]
})

// const icon = computed(() => {
//   const icons = {
//     success: CheckCircleIcon,
//     error: XCircleIcon,
//     warning: ExclamationCircleIcon,
//     info: InformationCircleIcon,
//   }
//   return icons[props.type]
// })

const positionClasses = computed(() => {
  const classes = {
    'top-left': 'top-4 left-4',
    'top-center': 'top-4 left-1/2 transform -translate-x-1/2',
    'top-right': 'top-4 right-4',
    'bottom-left': 'bottom-4 left-4',
    'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2',
    'bottom-right': 'bottom-4 right-4',
  }
  return classes[props.position]
})

const show = () => {
  visible.value = true
  if (timer) clearTimeout(timer)
  if (props.timeout > 0) {
    timer = setTimeout(() => {
      visible.value = false
    }, props.timeout)
  }
}

const close = () => {
  visible.value = false
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
}

defineExpose({
  show,
  close
})
</script>

<style scoped>
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>